<template >
    <el-dialog :title="details.title" :visible.sync="showDialog" width="50%"  :showAssign="showAssign"
    @close="$emit('update:showAssign', false)">
        <el-form :model="form">
            <el-form-item :label='$t("rangeAssign.company") + ":"'>
                <el-select v-model="details.company.assign" placeholder="" @change="handleChangeCompany" style="margin-left: 12px;">
                    <el-option v-for="c of details.company.list" :key="c.value" :label="c.value" :value="c.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label='$t("rangeAssign.cards") + ":"' :label-width="formLabelWidth">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>Available</span>
                    </div>
                    <el-checkbox-group v-model="details.card_list">
                        <el-checkbox v-for="(type, index) in details.assignRange.filter(x => !x.assigned)" :name="type.name" :key="index" :label="type.text" :disabled="type.assigned && !type.owned" > </el-checkbox>
                    </el-checkbox-group>
                </el-card>
                <br>

                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>Assigned</span>
                    </div>
                    <el-checkbox-group v-model="details.card_list">
                        <el-checkbox v-model="type.checked" v-for="(type, index) in details.assignRange.filter(x => x.owned)" :name="type.name" :key="index" :label="type.text" :disabled="type.assigned && !type.owned" > </el-checkbox>
                    </el-checkbox-group>
                </el-card>
                <br>

                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>Assigned To Other Range</span>
                    </div>
                    <el-checkbox v-model="type.checked" v-for="(type, index) in details.assignRange.filter(x => x.assigned && !x.owned)" :name="type.name" :key="index" :label="type.text" :disabled="type.assigned && !type.owned" > </el-checkbox>
                </el-card>

            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button :size="button.size" @click="handleCancel">{{$t("rangeAssign.cancel")}}</el-button>
            <el-button type="primary" :size="button.size" @click="handleSubmit">{{$t("rangeAssign.save")}}</el-button>
        </span>
    </el-dialog>
</template>


<script>
import { findstrict } from '@/utils/helper'

export default {
    name: 'AssignRange',
     props: {
        showAssign: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        },
        details: {
            type: Object
        }
    },
    data() {
        return {
            showDialog: this.showAssign,
            button: {
                size: 'small'
            },
            form: {
                range_code: '',
                range_from: '',
                range_to: '',
                status: '',
                type: '',
                action: 'Assign'
            },
            formLabelWidth: '100px',
            card_list: [],
            new_selected_company: ''
        }
    },
    methods: {
        findAssignedCards() {
            let selectedRange = this.details.range; 
            let myData = findstrict(this.details.data_range.list, 'type', this.details.range.type);
            let checkedCardsList = this.details.card_list
            let errorCardsCheck = [];
            let hasCardAssign = {};
            let rangeContainer = [];
            let setRange = {};   
            let getRange = {};

            checkedCardsList.forEach(element => {
                errorCardsCheck.push(element)

                hasCardAssign = find(myData, 'cards', element);
                if(hasCardAssign.length > 0){
                    rangeContainer.push(hasCardAssign)
                }

                for (let prop in myData) {
                    if(((parseInt(selectedRange.range_from) === parseInt(myData[prop]['range_from']) && parseInt(selectedRange.range_to) < parseInt(myData[prop]['range_to'])) && 
                        (parseInt(selectedRange.range_from) > parseInt(myData[prop]['range_from']) && parseInt(selectedRange.range_to) < parseInt(myData[prop]['range_to'])) &&
                        (parseInt(selectedRange.range_from) < parseInt(myData[prop]['range_from']) && parseInt(selectedRange.range_to) > parseInt(myData[prop]['range_to']))) ||
                        ((parseInt(selectedRange.range_from) > parseInt(myData[prop]['range_from']) && parseInt(selectedRange.range_from) < parseInt(myData[prop]['range_to'])) || 
                        (parseInt(selectedRange.range_to) > parseInt(myData[prop]['range_from']) && parseInt(selectedRange.range_to) < parseInt(myData[prop]['range_to'])) || 
                        ((parseInt(selectedRange.range_from) > parseInt(myData[prop]['range_from']) && parseInt(selectedRange.range_from) < parseInt(myData[prop]['range_to'])) && 
                        (parseInt(selectedRange.range_to) > parseInt(myData[prop]['range_from']) && parseInt(selectedRange.range_to) < parseInt(myData[prop]['range_to']))) || 
                        ((parseInt(selectedRange.range_from) > parseInt(myData[prop]['range_from']) && parseInt(selectedRange.range_from) < parseInt(myData[prop]['range_to'])) && 
                        (parseInt(selectedRange.range_to) > parseInt(myData[prop]['range_from']) && parseInt(selectedRange.range_to) < parseInt(myData[prop]['range_to'])))  
                    )) {
                        setRange = findstrict(myData, 'range_from', myData[prop]['range_from']);
                        setRange = findstrict(setRange, 'range_to', myData[prop]['range_to']);

                        if(setRange.length > 0){
                            getRange = setRange;
                        }
                    } 
                }
            })

            let hasRange = (getRange.length > 0 && rangeContainer.length > 0)
            return hasRange
        },
        handleSubmit(event){
            let range = this.details.range

            if (this.details.company.assign.length > 0) {
                let checkExistingCard = this.findAssignedCards();
                let data = {}

                if (checkExistingCard === false) {
                    data = Object.assign({
                        id: range.id,
                        range_code: this.details.range.range_code,
                        cards: this.details.card_list.filter(x => x).join(),
                        companies: this.details.company.assign,
                        action: this.form.action
                    })
                }
                this.$emit('ok', data)
                this.$emit('update:showAssign', false)
                this.showDialog = false
            }else {
                this.handleErrorMessage(event, 'warning', this.$t('rangeAssign.warning_company'))
            }
        },
        handleErrorMessage(event, dynamicVariant, message) {
            event.preventDefault();
            this.$message({message: message, type: dynamicVariant})
        },
        
        handleCancel() {
            this.showDialog = false
        },
        handleChangeCompany(val) {
            this.new_selected_company = val
        }
    },
    watch: {
      showChange() {
        this.showDialog = this.showAssign
      }
    }
}

export const enRangeAssign = { 
    //Generals
    company: 'Company',
    cards: 'Cards',

    //Actions
    save: 'Save',
    cancel: 'Cancel',

    //Dialogue
    warning_card_code: 'Please assign a card code',
    warning_company: 'Please select a company',
    content: 'Are you sure to close this dialog?'
    
}

export const zhRangeAssign = { 
    //Generals
    company: '公司',
    cards: '牌',
    
    //Actions
    save: '保存',
    cancel: '取消',

    //Dialogue
    warning_card_code: '请指定一个卡片代码',
    warning_company: '请选择一家公司',
    content: '你确定要关闭这个对话框?'
}
</script>
